<template>
  <div class="html1_7">
      <h1>1.7 HTML5的结构标签</h1>
      <div class="html1_7_1">
        <h2>1.7.1 HTML5 &lt;!DOCTYPE> 标签</h2>
        <p>
          <pre>
定义和用法
&lt;!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 &lt;html> 标签之前。&lt;!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，&lt;!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 &lt;!DOCTYPE> 声明，这样浏览器才能获知文档类型。
示例
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;title>文档的标题&lt;/title>
&lt;/head>
&lt;body>
文档的内容......
&lt;/body>
&lt;/html>
          </pre>
        </p>
      </div>
      <div class="html1_7_2">
        <h2>1.7.2 article 标签</h2>
        <p>
          <pre>
            定义和用法
&lt;article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
&lt;article> 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论
示例
 &lt;article>
        &lt;h1>人民财评：微观主体活力四射，中国经济底气十足&lt;/h1>
        &lt;p>深耕实体经济 展现新的作为统筹助企纾困和激发活力的财税政策人民财评：为何要加快推动制造服务业高质量发展&lt;/p>
  &lt;/article>
          </pre>
        </p>
         <img src="../assets/images/2.33.png" alt="">
        <p>图2.7.2  article标签实例</p>
      </div>
      <div class="html1_7_3">
        <h2>1.7.3 header标签</h2>
        <p>
          <pre>
            定义和用法
&lt;header> 标签定义文档的页眉（介绍信息）。
在HTML5版本之前习惯使用div标签布局网页，在HTML5在DIV标签基础上新增header标签元素。也叫“&lt;header>”头部标签。以前我们在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加id进行布局。而头部常常使用&lt;div id=”header”>&lt;/div>或&lt;div class=”header”>&lt;/div>进行布局，特点与传统DIV布局不同，少了div做标签，而是新增元素标签。
正应为大家公认html布局中对“header”为常用命名，所以在HTML5新增了个header标签元素。可以这样理解为什么在html5中新增header为标签元素。
示例
&lt;header>
&lt;h1>三部门：严防经营用途贷款违规流入房地产领域 建立“黑名单”&lt;/h1>
&lt;/header>

          </pre>
        </p>
      </div>
      <div class="html1_7_4">
        <h2>1.7.4 nav标签</h2>
        <p>
          <pre>定义和用法
&lt;nav> 标签定义导航链接的部分。
提示：如果文档中有“前后”按钮，则应该把它放到 &lt;nav> 元素中
示例
&lt;nav>
    &lt;a href="#">经济 · 科技&lt;/a>
    &lt;a href="#">社会 · 教育&lt;/a>
     &lt;a href="#">国际 · 军事&lt;/a>
     &lt;a href="#">地方 · 访谈&lt;/a>
     &lt;a href="#">文旅 · 体育&lt;/a>
     &lt;a href="#">健康 · 生活&lt;/a>
   &lt;/nav>
          </pre>
        </p>
         <img src="../assets/images/2.34.png" alt="">
        <p>图2.7.4  nav标签实例</p>
      </div>
      <div class="html1_7_5">
        <h2>1.7.5 section标签</h2>
        <p>
          <pre>
            定义和用法
&lt;section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
注意：section不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是div。section 里应该有标题（h1~6），但文章中推荐用article 来代替。一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。
而适合使用&lt;section>标签的地方有：
1、文章的评论列表，有着整齐的结构；
2、文章内容的目录，有着文章内部结构纲要；
3、侧栏widget，在WebDesignWall中我看到了这样的设计，因为widget内容大都是评论列表、文章列表，有着清晰的结构且是独立完整的一部分；
4、包裹文章中各个章节的段落，但要在编辑器完成，目前来看并不易用。
示例
&lt;section>
 	&lt;h1>人民财评：微观主体活力四射，中国经济底气十足&lt;/h1>
    &lt;p>深耕实体经济&lt;/p>
&lt;/section>
          </pre>
        </p>
      </div>
      <div class="html1_7_6">
        <h2>1.7.6 aside标签</h2>
        <p>
          <pre>
            定义和用法
&lt;aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。
提示：&lt;aside> 的内容可用作文章的侧栏。
示例
&lt;aside>
        &lt;p>欧盟正式实施健康欧盟计划&lt;/p>
        &lt;p>罕见梵高画作拍出逾1300万欧元&lt;/p>
        &lt;p>4名叙利亚难民在黎巴嫩东北部被冻死&lt;/p>
 &lt;/aside>
          </pre>
        </p>
      </div>
      <div class="html1_7_7">
        <h2>1.7.7 hgroup标签</h2>
        <p>
          <pre>
            定义和用法
&lt;hgroup> 标签用于对网页或区段（section）的标题进行组合。
提示：请使用 &lt;figcaption> 元素为元素组添加标题。
示例
&lt;hgroup>
  &lt;h1>反恐战斗在密林深处打响&lt;/h1>
  &lt;h2>新型战车向陡坡冰河挺进&lt;/h2>
&lt;/hgroup>
          </pre>
        </p>
      </div>
      <div class="html1_7_8">
        <h2>1.7.8 figure标签</h2>
        <p>
          <pre>
            定义和用法
&lt;figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
提示：请使用 &lt;figcaption> 元素为 figure 添加标题（caption）。
示例
&lt;figure>
  &lt;p>黄浦江上的的卢浦大桥&lt;/p>
  &lt;img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
&lt;/figure>
          </pre>
        </p>
      </div>
      <div class="html1_7_9">
        <h2>1.7.9 figcaption标签</h2>
        <p>
          <pre>
            定义和用法
&lt;figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
示例
&lt;figure>
  &lt;figcaption>黄浦江上的的卢浦大桥&lt;/figcaption>
  &lt;img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
&lt;/figure>
          </pre>
        </p>
      </div>
      <div class="html1_7_10">
        <h2>1.7.10 footer标签</h2>
        <p>
          <pre>
            定义和用法
&lt;footer> 标签定义文档或节的页脚。&lt;footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 &lt;footer> 元素。
提示：&lt;footer> 元素内的联系信息应该位于 &lt;address> 标签中。
示例
&lt;footer>
        &lt;p>人 民 网 版 权 所 有 ，未 经 书 面 授 权 禁 止 使 用&lt;/p>
        &lt;p>Copyright © 1997-2021 by www.people.com.cn. all rights reserved&lt;/p>
&lt;/footer>
          </pre>
        </p>
         <img src="../assets/images/2.35.png" alt="">
        <p>图2.7.11  footer标签实例</p>
      </div>
      <div class="html1_7_11">
        <h2>1.7.11 dialog标签</h2>
        <p>
          <pre>
            定义和用法
&lt;dialog> 标签定义对话框或窗口。
示例
 &lt;table border="1">
        &lt;tr>
          &lt;th>一月 &lt;dialog open>这是打开的对话窗口&lt;/dialog>&lt;/th>
          &lt;th>二月&lt;/th>
          &lt;th>三月&lt;/th>
        &lt;/tr>
        &lt;tr>
          &lt;td>31&lt;/td>
          &lt;td>28&lt;/td>
          &lt;td>31&lt;/td>
        &lt;/tr>
    &lt;/table>
          </pre>
        </p>
        <img src="../assets/images/2.36.png" alt="">
        <p>图2.7.12  dialog标签实例</p>
      </div>
      <div class="html1_7_12">
        <h2>1.7.12  bdi标签</h2>
        <p>
          <pre>
            定义和用法
bdi 指的是 bidi 隔离。&lt;bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
示例
 &lt;ul>
        &lt;li>Username &lt;bdo dir="ltr">Bill&lt;/bdo>:80 points&lt;/li>
        &lt;li>Username &lt;bdo dir="rtl">Steve&lt;/bdo>: 78 points&lt;/li>
  &lt;/ul>
          </pre>
        </p>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>